<template>
  <transition
  enter-active-class="animated fadeIn"
  leave-active-class="animated fadeOut"
  >
      <div class="toast-bg-wrapper" @click.prevent v-show="visible">
      <div class="toast-bg">
        <div class="toast-wrapper">
          <div class="toast" v-html="showText"></div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'toast',
  props: {
    text: [String, Number],
    timeout: {
      type: Number,
      default: 1500
    }
  },
  data () {
    return {
      visible: false,
      showText: ''
    }
  },
  methods: {
    hide () {
      this.visible = false
    },
    show () {
      this.updateText(this.text)
      clearTimeout(this.task)
      this.task = null
      this.visible = true
      this.task = setTimeout(() => {
        this.visible = false
      }, this.timeout)
    },
    // 用来做持续显示的方法
    continueShow () {
      this.updateText(this.text)
      clearTimeout(this.task)
      this.task = null
      this.visible = true
    },
    updateText (text) {
      this.showText = text
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "../../assets/styles/global"
.toast-bg-wrapper
  // 由于toast独立于app实例外，使用相对会顶在下面
  position: absolute
  left: 0
  top: 0
  z-index: 2500
  width: 100%
  height: 100%
  background: transparent
  .toast-bg
    position: absolute
    top: 50%
    left: 50%
    margin: 0 0 0 -50%
    z-index: 2500
    width: 100%
    center()
    .toast-wrapper
      width: 60%
      line-height: px2rem(20)
      padding: px2rem(10) px2rem(20)
      box-sizing: border-box
      background: #ccc
      border-radius: px2rem(10)
      font-size: px2rem(14)
      color: white
      .toast
        text-align: center
        word-break: break-all
</style>
